*
{
    margin:0;
    padding:0;
}

#container
{
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);

    width:1000px;       /*保持宽高比*/
    height:375px;

    font-size:24px;
    font-family: Consolas,微软雅黑,serif;
}

#frame
{
    position:absolute;
    left:0;
    top:0;
    transform:translate(-40%,-40%);

    width:40%;
    height:auto;
}

#colorPicker
{
    position: absolute;
    left:0;
    top:0;

    width:60%;
    height:60%;
    border:2px solid darkgray;

    border-radius: 5% 0 0 0/15% 0 0 0; 
}

#contents
{
    position: absolute;
    right:0;
    
    top:0;

    width:36%;
    height:100%;
    border:2px solid darkgray;  

    border-radius: 0 8% 8% 0/0 10% 10% 0; 
}

#display
{
    position: absolute;
    left:0;
    top:70%;


    width:60%;
    height:30%;
    border:2px solid darkgray;

    border-radius:0 0 0 5%/0 0 0 25%; 
}

#extra
{
    position: absolute;
    right:0;
    top:100%;

    height:7%;

    padding:10px;
}
#extra > a > img
{
    height:100%;
    border:2px solid darkgray;

    border-radius:50%; 
}